<template>
	<!-- 栏目首页 -->
	<view class="home-class-room">
		<view class="class-wrapper">
			<view class="swiper-wrapper">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in swiperArr" :key="index" class="swiper-item" @click="swiperHandle">
						<image :src="item.bannerImgUrl" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="nav-list">
				<view v-for="(item, index) in bannerArr" @click="jumpHandle_column(item, index)" :key="index" class="nav-list-item">
					<image class="icon-image" :src="item.iconImgUrl" alt="" />
					<view class="icon-name">{{ item.iconName }}</view>
				</view>
			</view>
		</view>
		<view class="ray-panel">
			<view class="ray-header">
				<view class="left">精选栏目</view>
				<view @click="jumpHandle_column('0', -1)" class="right more"><text>更多精选栏目</text></view>
			</view>

			<view class="ray-content">
				<view @click="jumpHandle_class(item)" class="class-item" v-for="(item, index) in resultArr" :key="index">
					<view class="item-border">
						<image :src="item.imgUrl" mode="aspectFill"></image>
						<view class="content">{{ item.subjectName }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import http from '../../common/request.js';
import {getCommonShareInfo} from '@/common/utils.js'
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: false,
			autoplay: true,
			interval: 2000,
			duration: 500,
			swiperArr: [],
			resultArr: [],
			bannerArr: []
		};
	},
	mounted() {
		// 获取header轮播
		this.getDetails();
		// banner
		this.getShequn();
		// 获取列表
		this.getList();
	},
	methods: {
		getDetails() {
			http('/api/sysBannerInfo/appIndexGetList', { method: 'GET', data: { bannerLocation: 2 } }).then(result => {
				if (result.code == 200) {
					this.swiperArr = result.data;
				} else {
				}
			});
		},
		getShequn() {
			http('/api/sysIconInfo/appIndexGetList', { data: { iconLocation: 2 }, method: 'GET' }).then(result => {
				if (result.code == 200) {
					this.bannerArr = result.data;
				} else {
				}
			});
		},
		getList() {
			http('/api/sysSubjectInfo/list', { method: 'GET', data: { subjectStatus: 1, hotFlag: 1 } }).then(result => {
				if (result.code == 200) {
					this.resultArr = result.data;
				} else {
				}
			});
		},
		jumpHandle_column(item, index) {
			uni.navigateTo({
				url: '/home/classRoom/column?index=' + index,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		jumpHandle_class(item) {
			uni.navigateTo({
				url: '/home/classRoom/class?subjectId=' + item.subjectId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		// 跳转列表详情
		detailsHandle() {
			uni.navigateTo({
				url: '/home/classRoom/details',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		//轮播图跳转
		swiperHandle() {
			uni.navigateTo({
				url: '/home/classRoom/swiperDetails',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		}
	}
};
</script>

<style scoped lang="less">
.home-class-room {
	.class-wrapper {
		background-color: #fff;
		padding: 23rpx 40rpx 32rpx 40rpx;

		.swiper-wrapper {
			overflow: hidden;
			background: rgba(238, 238, 238, 1);
			border-radius: 20rpx;

			.swiper-item {
				overflow: hidden;
				border-radius: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.nav-list {
			padding: 20rpx 24rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 4rpx 20rpx 0px rgba(102, 100, 93, 0.2);
			border-radius: 12rpx;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			color: #66645d;

			.nav-list-item {
				text-align: center;
				.icon-image {
					max-width: 132rpx;
					height: 70rpx;
					margin-bottom: 4rpx;
				}

				.icon-name {
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(102, 100, 93, 1);
					line-height: 30rpx;
				}
			}
		}
	}
	.ray-panel {
		.ray-content {
			.content {
				font-family: 'PingFangSC-Light';
				margin: 20rpx;
				font-size: 28rpx;
				font-weight: 300;
				color: #66645d;
				line-height: 40rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				min-height: 40rpx;
			}
		}
	}
}
</style>
